<template>
    <div>
    
        <el-dialog
        @close="closePrivece"
        :visible="dialogVisible">
            <img v-lazy="`http://47.105.157.158:3000/images/cat/${currentAlbum.cat}/${currentImg}`">
            <span slot="footer" class="dialog-footer">
              <el-button @click="shangyizu">上一组</el-button>
              <el-button type="primary" @click="nextImg">下一组</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        currentAlbum: {
            type: Object
        },
        currentImg: {
            type: String
        }
    },
    setup(props, context) {
        const dialogVisible = (true);

        // 关闭预览窗口
        const closePrivece = function () {
            context.emit('closePrivece', false);
        }

        // 下一组
        const nextImg = function () {
            context.emit('nextImg');
        }
        // 上一组
        const shangyizu = function () {
            context.emit('shangyizu');
        }

        const methods = { closePrivece, nextImg, shangyizu }

        return {
            ...methods,
            dialogVisible
        }
    }
}
</script>

<style lang="less" scoped>
img {
    width: 100%;
}
</style>